<template>
  <el-table :data="tableData" size="small" >
		<el-table-column label="1" prop="one" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.one">
			</template>
		</el-table-column>
		<el-table-column label="2" prop="two" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.two">
			</template>
		</el-table-column>
		<el-table-column label="3" prop="three" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.three">
			</template>
		</el-table-column>
		<el-table-column label="4" prop="four" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.four">
			</template>
		</el-table-column>
		<el-table-column label="5" prop="five" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.five">
			</template>
		</el-table-column>
		<el-table-column label="6" prop="six" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.six">
			</template>
		</el-table-column>
		<el-table-column label="7" prop="seven" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.seven">
			</template>
		</el-table-column>
		<el-table-column label="8" prop="eight" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.eight">
			</template>
		</el-table-column>
		<el-table-column label="9" prop="nine" width="30">
			<template #default="scope">
				<input type="text" v-model="scope.row.nine">
			</template>
		</el-table-column>
		<el-table-column label="10" prop="ten" width="35">
			<template #default="scope"> 
				<input type="text" v-model="scope.row.ten">
			</template>
		</el-table-column>
		<el-table-column label="11" prop="eleven" width="35">
			<template #default="scope">
				<input type="text" v-model="scope.row.eleven">
			</template>
		</el-table-column>
		<el-table-column label="12" prop="twelve" width="35">
			<template #default="scope">
				<input type="text" v-model="scope.row.twelve">
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup>
import { defineProps } from "vue";
// eslint-disable-next-line vue/no-setup-props-destructure
let { tableData } = defineProps(["tableData"]);
</script>

<style lang='less' scoped>
:deep(.el-table__header) {
  width: 100% !important;

  thead {
    tr > th {
      background: #cddaee !important;
      color: #171717;
    }
  }
}
.cell{
	input{
		width: 100%;
		text-align: center;
	}
}
:deep(.el-table__body) {
  width: 100% !important;

  tbody {
    tr {
      background: #f6f8fb;
    }

    .cell {
      padding: 0 !important;
      text-align: center;
    }
  }
}

:deep(.el-table__cell) {
	padding: 0;
}
</style>
